<template>
    <div class="condition-item">
       当<n-select class="condition-single-key" v-model:value="value.key" placeholder="请选择" :disabled="disable" :options="keysOptions">
        </n-select> 
        <n-select class="condition-single-compare" v-model:value="value.compare" placeholder="请选择" :disabled="disable" :options="compareKeyMap[keyObj?.type]">
        </n-select>
        <div class="condition-single-value">
            <n-input-number v-if="keyObj?.type === 'number'" v-model:value="value.value" clearable />
            <n-input v-if="keyObj?.type === 'text'"  v-model:value="value.value" type="text" placeholder="输入" clearable/>
            <n-date-picker v-if="keyObj?.type === 'date'" v-model:value="value.value" type="date" clearable/>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { compareKeyMap,keysOptions,defalutCondition } from './config'
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {
            return {
                ...defalutCondition
            }
        }
    },
    disable: {
        type: Boolean,
        default: false
    },
})
const emit = defineEmits(['update:modelValue'])
const value = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emit('update:modelValue', val)
    }
})
const keyObj = computed(() => {
    return keysOptions.find(item => item.value === value.value.key)
})

</script>
<style>
.condition-item {
    margin-left: 30px;
    display: flex;
    align-items: center;
}
.condition-item .n-select{
    margin-left: 10px;
}
.condition-single-compare {
  width: 100px;
}
.condition-single-key{
     width: 120px;
}

.condition-single-value {
  margin-left: 10px;
  max-width: 160px;
}

</style>